<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="display: block;font-size: 20px; margin-bottom: 20px;">新增文章</span>
            </div>
        </template>
        <div>
            <span>文章信息</span>
            <el-form :data="saveList" label-width="80px">
                <el-form-item style="margin-top: 10px;" props="title" label="文章标题">
                    <el-input style="width: 722px;" v-model="saveList.title" size="large" placeholder="请输入文章标题"></el-input>
                </el-form-item>
                <el-form-item label="列表图片" style="display: flex;justify-content: center;align-items: center;">
                    <UploadImg @uploadFile="getPictureName"></UploadImg>
                </el-form-item>
                <el-form-item style="margin-top: -25px;">
                    <div class="el-upload__tip">
                        图片尺寸800*800px,可上传多张
                    </div>
                </el-form-item>
                <el-form-item props="title" label="文章分类">
                    <el-select style="width: 252px;" v-model="saveList.type" placeholder="请选择" size="large">
                        <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="文章内容">

                    <WangEditor style="width: 100%;" @update:editorValue="update" ref="editorRef"
                        v-model="form.noticeContent" :editorValue="form.noticeContent"></WangEditor>

                    <!-- <WangEditor :Moretext="getMoreText"></WangEditor> -->
                </el-form-item>
                <el-form-item label="发布时间">
                    <el-date-picker style="width:252px" v-model="value2" type="datetime" placeholder="请选择发布时间"
                        :shortcuts="shortcuts" />
                </el-form-item>
                <el-form-item label="排序号">
                    <el-input style="width: 252px;" v-model="num" placeholder="请输入排序号"></el-input>
                    <span class="text">请填写数字，数字越大排序越靠前</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitText">发布</el-button>
                    <el-button @click="cancleReturn">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<script lang='ts' setup>
import { reactive, onMounted, ref } from 'vue'
import api from '@/api'
import { saveArticleType } from '@/types/ccc/article'
import UploadImg from '@/views/ccc/uploadImg.vue';
import WangEditor from '@/views/ccc/WangEditor.vue'
import { UploadFile, ElMessage } from 'element-plus'
import format from '@/utils/ccc/format'
import { useRouter } from 'vue-router'

const form = ref({
    noticeContent: ''
})
const num = ref<string>('')
const update = (value: any) => {
    form.value.noticeContent = value
}









// 获取文章分类
let options = reactive<Array<any>>([{
    value: 0,
    label: '请选择'
}])
const getArticle = async () => {
    const result = await api.systemSetting.article.getAllArticleTypes()
    console.log(result);

    if (result.data.code === 200) {
        console.log(result.data.data);
        result.data.data.forEach((item: any) => {
            console.log(item);
            console.log(options);
            if (item) {
                options.push({
                    'value': item.id,
                    'label': item.name
                })
            }
        });

    }
}
onMounted(() => {
    getArticle()

})


const saveList = reactive<saveArticleType>({
    title: '',
    picture: '',
    type: 0,
    publisher: '李明明',
    collectNum: 0,
    publishTime: '',
    content: ''
})
const getPictureName = (file: UploadFile) => {
    console.log(file);
    saveList.picture = `public/upload/${file.name}`
}

const value2 = ref<object>()
const shortcuts = [
    {
        text: '今天',
        value: new Date(),
    },
    {
        text: '昨天',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: '一周以前',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
    {
        text: '一周以后',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        },
    },
]
//表单提交 
const submitText = async () => {
    console.log(1);
    console.log(saveList);
    if (value2.value && form.value.noticeContent && num.value) {
        saveList.publishTime = format(value2.value)
        saveList.content = form.value.noticeContent
        saveList.collectNum = Number(num.value)
        const result = await api.systemSetting.article.saveArticleApi(saveList)
        if (result.data.code === 200) {
            ElMessage.success(result.data.msg)
        } else {
            ElMessage.warning(result.data.msg)
        }

    }
    console.log(saveList.publishTime);
    console.log(form.value.noticeContent);


}
const router = useRouter()
const cancleReturn = () => {
    router.replace('/home/system/zx')
}
</script>

<style lang='scss' scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 12px;
    color: #989797;
    margin-left: 15px;
}
</style>